<template>
  <!-- 姓氏文化 -->
  <view class="flex" style="background: #F2F2F2;">
    <pcNavigation></pcNavigation>
    <view class="flex-sub flex flex-column justify-center" style="height: 100vh;">
      <view style="margin-right: 20rpx;height: 98%;" class="flex flex-column">
        <scroll-view scroll-x="true"
                     style="width: 100%;border-radius: 16rpx;padding:  36rpx 0;white-space: nowrap;flex-direction: row;"
                     class="bg_FFFFFF familyName" enable-flex
        >
          <view style="display: inline-block">
            <view class="flex align-center" style="white-space: nowrap">
              <view v-for="(item,index) in state.list"
                    :key="index"
                    class="fw_500 flex align-center justify-center ml_74 fs_40"
                    style="color: #6F6F6F;white-space: nowrap;border-radius: 16rpx;padding: 10rpx 20rpx;cursor:pointer;"
                    :style="{
                      background: index == sidebarCulture ? '#FF4206' : 'transparent',
                      color: index == sidebarCulture ? '#FFFFFF' : '#6F6F6F',
                      border: index == sidebarCulture ? '2rpx solid #FF4206' : '2rpx solid #DBDBDB',
                    }"
                    @click.stop="sheep.$store('pc').setSidebarCulture(index)"
              >
                {{ item.name }}
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="flex-sub flex flex-column mt_20">
          <!-- 中华姓氏 -->
          <pcChineseSurname v-if="sidebarCulture == 0"></pcChineseSurname>
          <!-- 拜祖寻根 -->
          <pcWorship v-if="sidebarCulture == 1"></pcWorship>
          <!-- 缅怀英烈 -->
          <pcMourn v-if="sidebarCulture == 2"></pcMourn>
          <!-- 历史今天 -->
          <pcHistoryToday v-if="sidebarCulture == 3"></pcHistoryToday>
          <!-- 节日节气 -->
          <pcSolarTermFestival v-if="sidebarCulture == 4"></pcSolarTermFestival>
          <!-- 老黄历 -->
          <pcAlmanac v-if="sidebarCulture == 5"></pcAlmanac>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { reactive, computed, getCurrentInstance, nextTick } from 'vue';
  import sheep from '@/sheep';
  import { onReady, onLoad, onShow } from '@dcloudio/uni-app';
  import PcNavigation from '@/pages/pc/pcComponents/pcNavigation.vue';
  import HomePage from '@/pages/pc/components/homePage.vue';
  import PcChineseSurname from '@/pages/pc/pcComponents/pcChineseSurname.vue';
  import PcWorship from '@/pages/pc/pcComponents/pcWorship.vue';
  import PcMourn from '@/pages/pc/pcComponents/pcMourn.vue';
  import PcHistoryToday from '@/pages/pc/pcComponents/pcHistoryToday.vue';
  import PcSolarTermFestival from '@/pages/pc/pcComponents/pcSolarTermFestival.vue';
  import PcAlmanac from '@/pages/pc/pcComponents/pcAlmanac.vue';

  const state = reactive({
    list: [
      { name: '中华姓氏' },
      { name: '拜祖寻根' },
      { name: '缅怀英烈' },
      { name: '历史今天' },
      { name: '节日节气' },
      { name: '老黄历' },
    ],
  });

  const sidebarCulture = computed(() => sheep.$store('pc').sidebarCulture);

  onReady(() => {
    sheep.$store('pc').setSidebarOptions(0);
  });

</script>

<style scoped lang="scss">
  .familyName {
    font-family: Source Han Sans CN, Source Han Sans CN;
  }

  .showSurnameTree {
    animation: surnameTree .2s linear;
    animation-fill-mode: forwards; //  动画停留在最后一刻，也就是隐藏
  }

  .hideSurnameTree {
    animation: hideSurnameTree .2s linear;
    animation-fill-mode: forwards;
  }

  @keyframes surnameTree {
    0% {
      left: 100%;
    }
    100% {
      left: 0;
    }
  }

  @keyframes hideSurnameTree {
    0% {
      left: 0;
    }
    100% {
      left: 100%;
    }
  }
</style>
